<template>
  <div class="pl_bd">
    <div class="row">
      <div class="heander">
        <h3>
          <span class="te">{{tit}}</span>
          <a href="#" class="sel" @click="show">
            选择分类
            <span class="el-icon-arrow-down"></span>
          </a>
        </h3>
        <div class="fla">
          <a href="#" class="te2">热门</a>
        </div>
        <div class="opt" v-show="flage">
          <div class="heander2">
            <a href="#" class="sty" @click="change('全部')" @mouseup="show">全部风格</a>
          </div>
          <div>
            <dl v-for="(item ,index) in list" :key="index">
              <dt class="dhea">
                <img :src="item.src" class="dimg" />
                {{item.title}}
              </dt>
              <dd class="dbod">
                <!-- :href="'#/discover/playlist/cat='+item2" -->
                <a
                  @click="change(item2)"
                  class="lin"
                  v-for="(item2 ,index) in item.til"
                  :key="index"
                >{{item2}}</a>
              </dd>
            </dl>
          </div>
        </div>
        <hr class="led" />
      </div>
      <ul>
        <li v-for="(item ,index) in musiclist" :key="index">
          <div class="list">
            <router-link :to="'/discover/playListInfo/id='+item.id">
              <img :src="item.coverImgUrl+'?param=140y140'" width="140px" height="140px" />
            </router-link>
            <div class="button">
              <i class="el-icon-headset"></i>
              <span>{{changeNum(item.playCount)}}</span>
              <a href="#" class="el-icon-video-play"></a>
            </div>
          </div>
          <p class="brief">
            <router-link :to="'/discover/playListInfo/id='+item.id" class="tit">{{item.name}}</router-link>
          </p>

          <p class="use">
            <span>by</span>
            <a href="#">{{item.creator.nickname}}</a>
          </p>
        </li>
      </ul>
      <div class="page">
        <button @click="pageUp" class="pageup2" :class="{'pageup':pageNum!=1}">上一页</button>
        <span class="pagenu">{{pageNum}}</span>
        <button @click="pageDown" class="pagedown">下一页</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// //<router-link :to="'/discover/playListInfo/id='+'id值'">歌曲详细</router-link>
export default {
  name: "Disc_playlist",
  props:['tit'],
  data() {
    return {
      flage: false,
      list: [],
      musiclist: [],
      style: "",
      title: "全部",
      sel: "",
      num: "",
      ur: 0,
      dcli: 0,
      statePage: 0,
      pageNum: 1
    };
  },
  inject:['reload'],
  components: {},
  methods: {
    sh: function() {
      console.log(this.list);
    },
    show: function() {
      this.flage = !this.flage;
    },
    init: function() {
      axios
        .get("../json/select.json")
        .then(input => {
          this.list = input.data.sel;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取歌单方法
    playlist: function() {
      console.log(this.tit);
      axios
        .get(
          "https://autumnfish.cn/top/playlist?limit=35&offset=" +
            this.statePage +
            "&cat="+this.tit 
        )
        .then(input => {
          
          this.musiclist = input.data.playlists;
          this.title = "全部";
        })
        .catch(err => {
          console.log(err);
        });
    },
    change: function(item2) {
      this.tit = item2;
      this.title = item2;
      axios
        .get(
          "https://autumnfish.cn/top/playlist?limit=35&offset=" +
            this.statePage +
            "&cat=" +
            this.title
        )
        .then(input => {
          this.musiclist = input.data.playlists;
          this.flage = false;
        })
        .catch(err => {
          console.log(err);
        });
      
    },
    //播放数转换
    changeNum: function(li) {
      var num = "";
      if (parseInt(li / 10000) < 10) {
        num = li;
        return num;
      } else {
        num = parseInt(li / 10000);
      }
      return num + "万";
    },
    //下一页
    pageDown: function() {
      this.pageNum++;
      this.statePage += 30;
      this.playlist();
    },
    //上一页
    pageUp: function() {
      if (this.pageNum != 1) {
        this.statePage -= 35;
        this.playlist();
        this.pageNum--;
      }
    }
  },
  mounted() {
    this.init();
    this.playlist();
  }
};
</script>
